<template>
  <el-row>
    <el-col class="col">
      <el-row class="row" justify="start">
        <el-col :span="7"
          >小区名称:<el-input
            v-model="xiaoquInfo.name"
            style="width: 240px"
            placeholder="请输入小区名称"
            clearable
        /></el-col>
        <el-col :span="9"
          >创建时间:<el-date-picker
            v-model="xiaoquInfo.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            :size="size"
            @clear="clear"
        /></el-col>
        <el-col :span="2"
          ><el-button type="primary" @click="search">搜索</el-button></el-col
        >
      </el-row>
    </el-col>
    <el-col class="col">
      <el-button type="primary" @click="add">新增小区</el-button>
    </el-col>
    <el-col class="col">
      <el-table :data="infoList" border style="width: 100%">
        <el-table-column
          prop="communityId"
          label="ID"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="communityName"
          label="名称"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="communityAddress"
          label="位置"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="communityUserCount"
          label="用户数量"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="communityShopCount"
          label="关联门店"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="address"
          label="操作"
          align="center"
          label-class-name="header"
        >
          <!-- scope的作用是什么 -->
          <template #default="scope">
            <el-button type="text" @click="open(scope)">查看关联门店</el-button>
            <el-button type="text" @click="edit(scope)">编辑小区</el-button>
            <el-button type="text" @click="del(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col class="col">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :pager-count="8"
        :current-page="currentPage"
        @current-change="pChange"
      />
    </el-col>
    <el-col class="col">
      <el-dialog v-model="sign" :title="title" width="800" draggable>
        <LookInfo
          v-if="title == '查看关联门店'"
          :info="info"
          @click="newLook"
          @only="only"
        />
        <EditInfo
          v-else-if="title == '编辑小区'"
          :info="info"
          @update="update"
        />
        <AddInfo v-else @only="only" @request="request" />
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script setup>
import { reactive, onMounted, ref, watchEffect } from "vue";
// import { ElMessageBox } from "element-plus";
import LookInfo from "@/views/xiaoqu/component/LookInfo.vue";
import EditInfo from "@/views/xiaoqu/component/EditInfo.vue";
import AddInfo from "@/views/xiaoqu/component/AddInfo.vue";

import axios from "axios";

//搜索实现###########
let xiaoquInfo = reactive({
  name: "",
  time: "",
});

let startTime = ref("");
let endTime = ref("");
let times = [startTime, endTime];

watchEffect(function () {
  xiaoquInfo.value = { time: xiaoquInfo.time, name: xiaoquInfo.name };
  for (let key in xiaoquInfo.value.time) {
    times[key] = xiaoquInfo.value.time[key];
  }
  // startTime.value = times[0].getDate(startTime.value);
  startTime.value = times[0] + "+00:00:00";
  endTime.value = times[1] + "+00:00:00";
  console.log(xiaoquInfo.name);
  console.log(startTime.value);
  console.log(endTime.value);
});
//清空日期内容
const clear = function () {
  //点击x，清空日期后，会触发上一个watchEffect，所以starttime仍不为""
  startTime.value = "";
  endTime.value = "";
  console.log(startTime.value);
  console.log(endTime.value);
};
const search = async function () {
  let res =
    startTime.value == "[object Object]+00:00:00"
      ? await axios.get(
          `http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=1111&startTime=&endTime=&pageNum=1&pageSize=10&communityName=${xiaoquInfo.value.name}`
        )
      : await axios.get(
          `http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=1111&startTime=${startTime.value}&endTime=${endTime.value}&pageNum=1&pageSize=10&communityName=${xiaoquInfo.value.name}`
        );
  total.value = res.data.data.total;

  infoList.value = res.data.data.list.map((item) => {
    // item.address =
    //   item.communityProvince + item.communityCity + item.communityDistrict;
    return item;
  });
  console.log();
};

//结束

//分页器逻辑########
let currentPage = ref();
let total = ref();
const pChange = async function (pages) {
  currentPage.value = pages;
  console.log("分页变化");
  console.log(currentPage.value);

  //网络请求，刷新数据源
  let res = await axios.get(
    `http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=${currentPage.value}&pageSize=10&communityName=`
  );
  total.value = res.data.data.total;

  infoList.value = res.data.data.list.map((item) => {
    // item.address =
    //   item.communityProvince + item.communityCity + item.communityDistrict;
    return item;
  });
};
//

let infoList = ref([]);
onMounted(async function () {
  //async和await的作用是什么
  let res = await axios.get(
    "http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=1&pageSize=10&communityName="
  );
  //分页逻辑########
  watchEffect(function () {
    currentPage.value = res.data.data.pageNum;
    total.value = res.data.data.total;
    // console.log(currentPage.value);
  });
  //
  infoList.value = res.data.data.list.map((item) => {
    // item.address =
    //   item.communityProvince + item.communityCity + item.communityDistrict;
    return item;
  });
});

let sign = ref(false);
let title = ref();
let info = ref();
const add = function (data) {
  console.log(data);
  sign.value = true;
  title.value = "新增小区";
};
function open(data) {
  info.value = data.row;
  sign.value = true;
  title.value = "查看关联门店";
}
const edit = function (data) {
  info.value = data.row;
  sign.value = true;
  title.value = "编辑小区";
};
const del = async function (data) {
  console.log(data);
  alert("确认删除？");
  let res = await axios.post(
    "http://43.143.190.87:8091/panghudaojiaBackend/community/communityRemove",
    {
      communityId: data.row.communityId,
    }
  );
  res = await axios.get(
    "http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=1&pageSize=10&communityName="
  );
  infoList.value = res.data.data.list.map((item) => {
    // item.address =
    //   item.communityProvince + item.communityCity + item.communityDistrict;
    return item;
  });

  console.log(res);
};

// const newLook = function () {
//   open(info.value);
// };

//获取子组件中保存后的数据，实现数据更新
const update = function (xq, check) {
  sign.value = check;
  let index = infoList.value.findIndex((item) => {
    return item.communityId == xq.communityId;
  });
  if (index != -1) {
    infoList.value[index] = xq;
  }
};

const only = function (check) {
  sign.value = check;
};
const request = async function () {
  let res = await axios.get(
    "http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=1&pageSize=10&communityName="
  );
  infoList.value = res.data.data.list.map((item) => {
    return item;
  });
};
</script>

<style lang="less" scoped>
.col {
  margin: 10px 0;
  .row {
    margin-top: 20px;
    box-sizing: border-box;
  }
}
/deep/ .header {
  background-color: #1890ff !important;
  color: white;
}
</style>